<template>
  <div class="person">
    <h1>情况五：监视上述的多个数据</h1>
     <h2>姓名：{{person.name}}</h2>
     <h2>年龄：{{person.age}}</h2>
     <h2>车辆：{{person.cars.c1}}、{{ person.cars.c2 }}</h2>
      <button @click="changeName">修改名字</button>
      <button @click="changeAge">修改年龄</button>
      <button @click="changeC1">修改第一台车</button>
      <button @click="changeC2">修改第二台车</button>
      <button @click="changeCars">修改整个车</button>
  </div>
</template>

<script setup lang="ts" name="Person">
  import { reactive, watch } from 'vue'

  //数据 person有姓名和年龄还有车，车是一个对象包括c1，c2
  let person = reactive({
    name: '张三',
    age: 18,
    cars: { 
      c1: 'benz', 
      c2: 'audi' 
    }
  })
  //方法
  function changeName() {
    person.name += '~'
  }
  function changeAge() {
    person.age += 1
  }
  function changeC1() {
    person.cars.c1 = '奥迪'
  }
  function changeC2() {
    person.cars.c2 = '大众'
  }
  function changeCars() {
    person.cars = { c1: '保时捷', c2: '法拉利' }//.person整个不能改变，但是里面的属性可以改变
  }

  //监视,情况五：监视上述的多个数据,使用数组
  watch([()=>person.name,()=>person.cars.c1], (newValue, oldValue) => {
    console.log('person改变了',newValue, oldValue)
  },{deep:true})
</script>

<style scoped>
.person {
    /* 背景颜色 */
    background-color: skyblue;
    /* 阴影 */
    box-shadow: 0 0px 10px;
    /* 圆角 */
    border-radius: 4px;
    padding: 20px; /* 内边距 */
}
button { 
    margin: 0 5px;
}
</style>


